<template>
  <div>
    <el-form ref="reportEditForm" :model="formItem" label-width="120px" size="mini">
      <el-row :gutter="40">
        <el-col :span="8">
          <el-form-item label="服务编号" prop="registerCode">
            <el-input v-model="registerCode" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="巡检厅局" prop="unitName">
            <el-input v-model="unitName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="执行人" prop="username">
            <el-input v-model="username" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始日期" prop="startTime">
            <el-input v-model="startTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束日期" prop="endTime">
            <el-input v-model="endTime" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="form-info-title">
            <span>每日明细</span>
          </div>
        </el-col>
        <el-col :span="24">
          <PageableTable ref="table" :loading="false" :table-height="400" :data="tableData" :disable-pageable="true">
            <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
              <template slot-scope="scope">
                <column-render :render="column.render" :row="scope.row" :column="column" />
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button v-if="row.status === 'toBeReported'" title="提交" type="text" size="mini" icon="el-icon-success" @click="save(row.id, row)" />
              </template>
            </el-table-column>
          </PageableTable>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { reportDetail, reportUpdate } from '@neu/dcom-ui/api/insuranceRegisterTask'
import PageableTable from '@neu/biz-core/components/PageableTable'
import { formatDate } from '@neu/biz-core/utils/utils'
// 定义一个表单原始项
const formItem = {
  code: '',
  reportPersonCode: '',
  reportPersonName: '',
  unitCode: '',
  startTime: '',
  endTime: '',
  cronExp: '',
  sorting: 0,
  normal: true,
  abnormalSituation: '',
  status
}
export default {
  name: 'ReportEditForm',
  components: {
    PageableTable
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    },
    registerCode: {
      required: false,
      type: String,
      default: ''
    },
    unitName: {
      required: false,
      type: String,
      default: ''
    },
    startTime: {
      required: false,
      type: String,
      default: ''
    },
    endTime: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      tableData: [],
      username: '',
      insideColumns: [
        { title: '状态', key: 'status', display: true,
          render: (h, params) => {
            const reprotStatus = params.row.status
            let text = ''
            if (reprotStatus === 'notActive') {
              text = '未激活'
            } else if (reprotStatus === 'reported') {
              text = '已上报'
            } else if (reprotStatus === 'toBeReported') {
              text = '待上报'
            }
            return (<el-tag> { text } </el-tag>)
          }
        },
        { title: '上报天数', key: 'sorting', width: 150,
          render: (h, params) => {
            return (<span>第 { params.row.sorting } 天</span>)
          }
        },
        { title: '上报时间', key: 'startTime', width: 150,
          render: (h, params) => {
            return (<span> { formatDate(params.row.startTime, 'YYYY-MM-DD') } </span>)
          }
        },
        { title: '巡检状况', key: 'normal', display: true,
          render: (h, params) => {
            if (params.row.status === 'toBeReported') {
              return (
                <div>
                  <el-radio-group v-model={params.row.normal}>
                    <el-radio label={ true }>正常</el-radio>
                    <el-radio label={ false }>异常</el-radio>
                  </el-radio-group>
                </div>
              )
            } else {
              if (params.row.status === 'reported') {
                return (
                  <span>
                    { params.row.normal ? '正常 ' : ' 异常 ' }
                  </span>
                )
              } else {
                return (
                  <span>
                    未巡检
                  </span>
                )
              }
            }
          }
        },
        { title: '异常原因', key: 'abnormalSituation', display: true,
          render: (h, params) => {
            if (params.row.status === 'toBeReported') {
              return (
                <div>
                  <el-input v-model={ params.row.abnormalSituation }/>
                </div>
              )
            } else {
              return (
                <span> { params.row.abnormalSituation } </span>
              )
            }
          }
        }
      ]
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        reportDetail(this.id).then(response => {
          this.username = this.$store.state.user.name
          this.tableData = response.data
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save(id, row) {
      this.$refs.reportEditForm.validate((valid) => {
        if (valid) {
          this.formItem.normal = row.normal
          this.formItem.abnormalSituation = row.abnormalSituation
          reportUpdate(id, this.formItem).then(response => {
            if (response === false) return
            this.$message({
              showClose: true,
              message: '提交成功！',
              type: 'success'
            })
            this.fetch()
          })
        }
      })
    }
  }
}
</script>

